import {GenAddTableProps} from "@/pages/system/tool/gen/add/Stateless/interfaces";
import {GenAddTableData, GenTableField, IndexData} from "@/pages/system/tool/gen/add/interfaces";
import React, {useEffect, useRef, useState} from "react";
import {columns} from "@/pages/system/tool/gen/add/Stateless/config/columns";
import {useModel} from "@@/plugin-model/useModel";
import {EditableFormInstance} from "@ant-design/pro-table/lib/components/EditableTable";
import {ProFormInstance} from "@ant-design/pro-form";
import {field} from "@/pages/system/tool/gen/add/Stateless/config/field";
import {Button, message, Space} from "antd";
import AddIndex from "@/pages/system/tool/gen/add/Stateless/componets/AddIndex";
import {ModalFormProps} from "@ant-design/pro-form/lib/layouts/ModalForm";
import {AddIndexProps} from "@/pages/system/tool/gen/add/Stateless/componets/AddIndex/interfaces";
import {OptionActions} from "@/type/type";
import {addGenTable} from "@/services/gen/table";
import {history} from "umi";

export default (Stateless: any) => {

  const {javaFieldTypeList, getJavaFieldType} = useModel("javaFiledType")
  const {initialState} = useModel("@@initialState");
  const editorFormRef = useRef<EditableFormInstance<GenTableField>>();
  const [genTableFieldList, setGenTableFieldList] = useState<GenTableField[]>([]);
  const [indexList, setIndexList] = useState<IndexData[]>([]);
  const formRef: React.MutableRefObject<ProFormInstance<GenAddTableData> | undefined> = useRef<ProFormInstance<GenAddTableData>>();

  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
  useEffect(() => {
    getJavaFieldType()
  }, [])

  const addIndexModalForm: ModalFormProps<IndexData> & AddIndexProps = {
    trigger: <Button type={"primary"}>配置锁引</Button>,
    title: `锁引`,
    onFinish: async (formData) => {
      return true;
    },
    indexList,
    setIndexList,
    genFieldList: genTableFieldList.map(item => ({label: item.name, value: item.name}))
  }

  // @ts-ignore
  const optionAction: OptionActions<GenAddTableData, GenAddTableData> = {
    add: () => {
      Promise.all([editorFormRef.current?.validateFields(), formRef.current?.validateFields()]).then(res => {
        // @ts-ignore
        const genAddTable: GenAddTableData = {
          ...formRef.current?.getFieldsValue(),
          indexList,
          fieldList: genTableFieldList
        }
        addGenTable(genAddTable).then(res => {
          message.success("新增成功").then()
          history.push({
            pathname: "/system/tool/gen"
          })
        })
      })
    },
    edit: (data) => {

    }
  }

  // @ts-ignore
  // @ts-ignore
  const statelessProps: GenAddTableProps<GenTableField, GenTableField> = {
    tableProps: {
      rowKey: "id",
      tableStyle: {},
      pagination: {defaultPageSize: 15},
      size: "small",
      bordered: true,
      search: false,
      headerTitle: (<Space>
          <AddIndex {...addIndexModalForm}/>
        </Space>
      ),

      // @ts-ignore
      columns: columns(javaFieldTypeList, setGenTableFieldList),
      editableFormRef: editorFormRef,
      recordCreatorProps: {
        newRecordType: 'dataSource',
        position: "bottom",
        // @ts-ignore
        record: (index: number, dataSource) => {
          return {id: Date.now(), charset: "utf8mb4", charsetSort: "utf8mb4_general_ci"}
        }
      },
      value: genTableFieldList,
      onChange: setGenTableFieldList,
      editable: {
        type: "multiple",
        // @ts-ignore
        editableKeys: editableKeys,
        onValuesChange:
          (record, recordList) => {
            setGenTableFieldList(recordList);
          },
        onChange:
        setEditableRowKeys,
        actionRender: (row, config, defaultDoms) => {
          return [defaultDoms.delete];
        },
      }
      ,
      controlled: true
    },
    formProps: {
      formRef,
      // @ts-ignore
      groupList: field(initialState?.currentUser?.databaseName),
      layout: "horizontal",
      submitter: {
        resetButtonProps: {
          style: {
            display: "none"
          }
        },
        submitButtonProps: {
          style: {
            display: "none"
          }
        },
        render: () => [
          <Button onClick={() => optionAction.add()}>保存</Button>,
          <Button type={"primary"} onClick={() => optionAction.add()}>提交</Button>,
        ]
      }
    },
  }
  return <Stateless {...statelessProps}/>
}
